﻿{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="css/index.css" rel="stylesheet" >
    <link href="css/swiper.min.css" rel="stylesheet" >	
{% endblock %}

{# body代码#}
{% block body %}
    <!--container start-->
	<div class="container_white">
		<div>
			<div id="culture">
				<div class="title">美食排行榜</div>
				<div class="intro">食艺道呈递给您的不是一场饕餮盛宴，而是让您感受到我们对于每一份餐品的匠心制作，所以每周我们会统计餐品的订购情况，排列出最佳餐品排行榜，在今后的研发设计中，择善而长，推陈出新。</div>
			    <ul class="culture-list">
			        <li class="big default">
			            <a href="dishesDetails.html">
			                <img class="culture-list-img" src="{{ ctx.app.config.staticUrl }}/images/Culture_01.jpg">
		                	<div class="culture_con">
		                		<div class="number-img">
			                		<img src="{{ ctx.app.config.staticUrl }}/images/001.png"/>
			                	</div>
				                <div class="info">
					                <h3>Macaroni with Lobster</h3>
					                <p>he challenge is to help people understand this. The classics such as Arial, Helvetica, Verdana or Tahoma are engrained as fonts you will always expect to</p>
				                </div>
		                	</div>
			            </a>
			            <div class="line"></div>
			            <div class="big_bg"></div>
			        </li>
			        <li>
			            <a href="dishesDetails.html">
			                <img class="culture-list-img" src="{{ ctx.app.config.staticUrl }}/images/Culture_02.jpg">
		                	<div class="culture_con">
		                		<div class="number-img">
			                		<img src="{{ ctx.app.config.staticUrl }}/images/002.png"/>
			                	</div>
				                <div class="info">
					                <h3>Macaroni with Lobster</h3>
					                <p>he challenge is to help people understand this. The classics such as Arial, Helvetica, Verdana or Tahoma are engrained as fonts you will always expect to</p>
				                </div>
		                	</div>
			            </a>
			            <div class="line"></div>
			            <div class="big_bg"></div>
			        </li>
			        <li>
			            <a href="dishesDetails.html">
			                <img class="culture-list-img" src="{{ ctx.app.config.staticUrl }}/images/Culture_03.jpg">
		                	<div class="culture_con">
		                		<div class="number-img">
			                		<img src="{{ ctx.app.config.staticUrl }}/images/003.png"/>
			                	</div>
				                <div class="info">
					                <h3>Macaroni with Lobster</h3>
					                <p>he challenge is to help people understand this. The classics such as Arial, Helvetica, Verdana or Tahoma are engrained as fonts you will always expect to</p>
				                </div>
		                	</div>
			            </a>
			            <div class="line"></div>
			            <div class="big_bg"></div>
			        </li>
			        <li>
			            <a href="dishesDetails.html">
			                <img class="culture-list-img" src="{{ ctx.app.config.staticUrl }}/images/Culture_04.jpg">
		                	<div class="culture_con">
		                		<div class="number-img">
			                		<img src="{{ ctx.app.config.staticUrl }}/images/004.png"/>
			                	</div>
				                <div class="info">
					                <h3>Macaroni with Lobster</h3>
					                <p>he challenge is to help people understand this. The classics such as Arial, Helvetica, Verdana or Tahoma are engrained as fonts you will always expect to</p>
				                </div>
		                	</div>
			            </a>
			            <div class="line"></div>
			            <div class="big_bg"></div>
			        </li>
			        <li>
			            <a href="javascript:;">
			                <img class="culture-list-img" src="{{ ctx.app.config.staticUrl }}/images/Culture_05.jpg">
		                	<div class="culture_con">
		                		<div class="number-img">
			                		<img src="{{ ctx.app.config.staticUrl }}/images/005.png"/>
			                	</div>
				                <div class="info">
					                <h3>Macaroni with Lobster</h3>
					                <p>he challenge is to help people understand this. The classics such as Arial, Helvetica, Verdana or Tahoma are engrained as fonts you will always expect to</p>
				                </div>
		                	</div>
			            </a>
			            <div class="line"></div>
			            <div class="big_bg"></div>
			        </li>
			    </ul>
			    <div class="culture-time">2017.5.20</div>
			    <div class="title-img"><img src="img/title.png"/></div>
				<div class="culture-banner">
					<div class="swiper-container" id="swiper-culture">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:void(0);">
								<img src="{{ ctx.app.config.staticUrl }}/images/0411.png"/>
								<div class="swiper-con">
									<div class="swiper-title">通心粉和龙虾</div>
									<p>让套餐与排行同在，让精致与美味同在，让我们由心选择，享受当下，享受美食！</p>
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:void(0);">
								<img src="{{ ctx.app.config.staticUrl }}/images/0411.png"/>
								<div class="swiper-con">
									<div class="swiper-title">香辣牛腩饭</div>
									<p>让套餐与排行同在，让精致与美味同在，让我们由心选择，享受当下，享受美食！</p>
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:void(0);">
								<img src="{{ ctx.app.config.staticUrl }}/images/0411.png"/>
								<div class="swiper-con">
									<div class="swiper-title">香辣鸡腿堡</div>
									<p>让套餐与排行同在，让精致与美味同在，让我们由心选择，享受当下，享受美食！</p>
								</div>
							</a>
						</div>
					</div>
				</div>
				<!-- Add Arrows -->
		        <div class="culture-prev"></div>
		        <div class="culture-next"></div>
				</div>
				<div class="like">
					<div class="heart trs"></div>
					<div class="like-number">1267</div>
					<ul class="like-list">
						<li>
							<div class="like-img">
								<img src="{{ ctx.app.config.staticUrl }}/images/head.png"/>
							</div>
							<div class="like_name">蜡笔小新</div>
						</li>
						<li>
							<div class="like-img">
								<img src="{{ ctx.app.config.staticUrl }}/images/head.png"/>
							</div>
							<div class="like_name">蜡笔小新</div>
						</li>
						<li>
							<div class="like-img">
								<img src="{{ ctx.app.config.staticUrl }}/images/head.png"/>
							</div>
							<div class="like_name">蜡笔小新</div>
						</li>
						<li>
							<div class="like-img">
								<img src="{{ ctx.app.config.staticUrl }}/images/head.png"/>
							</div>
							<div class="like_name">蜡笔小新</div>
						</li>
						<li>
							<div class="like-img">
								<img src="{{ ctx.app.config.staticUrl }}/images/head.png"/>
							</div>
							<div class="like_name">蜡笔小新</div>
						</li>
					</ul>
					<div class="like_mind">请您根据个人意见，对喜爱的餐品点赞</div>
				</div>
			</div>
		</div>
	</div>
	<!--container end-->
{% endblock %}
{#js代码#}
{% block js %}	
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var swiperA = new Swiper('#swiper-culture', {
		        //autoplayDisableOnInteraction : false,
		        nextButton: '.culture-next',
		        prevButton: '.culture-prev',
				effect : 'fade',
		        loop: true,
		        autoplay: 3000
		    });
		}
	</script>
{% endblock %}